<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
  >
    <navbar
      :slotRight="true"
      :back="true"
      :customStyle="';background: #fff;'"
      :titleColor="'color: #fff ;'"
      :backColor="'#000'"
    >
      <view slot="right" class="row items-center">
        <view class="post-button" @click="toggleButton">
          <icon type="search" class="shake" color="#000" size="15"></icon>
          <text>
            {{ $t("dir") == "rtl" ? "شەرىتلىك ئىزدەش" : "条件搜索" }}
          </text>
        </view>
      </view>
    </navbar>

    <view class="main">
      <view style="padding-bottom: 130rpx; min-height: 1200rpx">
        <view
          class="d-flex flex-wrap items-center justify-center"
          style="margin-top: 10rpx"
        >
          <house-row
            v-for="(item, i) in dataList.data"
            :item="item"
            :key="i"
            @click="toDetail(item)"
          />
        </view>
        <u-empty
          v-if="
        dataList &&
            dataList.data.length == 0 &&
            dataList.loadmoreStatus != 'loading'
          "
          mode="list"
          icon="/static/images/empty.png"
          :text="$t('no_content')"
          style="padding-top: 250rpx"
        />
        <u-loadmore
          v-else
          :status="dataList.loadmoreStatus"
          :loading-text="$t('loadingText')"
          loadmore-text="."
          nomoreText="."
          :isDot="true"
          :line="dataList.loadmoreStatus == 'nomore'"
          color="#bfbfbf"
        />
      </view>
    </view>
    <!-- izdax -->
    <u-popup
      :show="showSearchPopup"
      @close="showSearchPopup = false"
      mode="bottom"
      :customStyle="{
        backgroundColor: '#ffffff',
        borderTopLeftRadius: '24rpx',
        borderTopRightRadius: '24rpx',
        height: '75vh',
      }"
    >
      <view class="search-popup">
        <view class="action-buttons">
          <view class="action-btn cancel-btn" @click.stop="confirmSearch">
            <view class="search-btn-content">
              <image
                src="https://appcdn.uqrixayli.com/mini-app/search.png"
                class="search-icon"
              />
              <text class="btn-text">{{ $t("izdax") }}</text>
            </view>
          </view>
          <view class="action-btn search-btn" @click="showSearchPopup = false">
            <text>{{ $t("qekinix") }}</text>
          </view>
        </view>
        <!-- mazmun  -->
        <scroll-view class="mazmun" scroll-y style="max-height: 60vh">
          <!-- orun -->
          <view class="filter-section">
            <view class="section-header">
              <view class="title-box">
                <view class="title-icon"></view>
                <text class="section-title"> {{ $t("orni") }}</text>
              </view>
            </view>
            <view class="city-row">
              <view
                v-for="item in orunList"
                :key="item.value"
                class="city-item"
                :class="{ active: selectedOrun === item.value }"
                @tap="selectedOrun = item.value"
              >
                <text>{{
                  $t("dir") == "rtl" ? item.label : item.labelCn
                }}</text>
              </view>
            </view>
          </view>



  
  
        </scroll-view>
        <!-- reset -->
        <view class="search-buttons">
          <view class="reset-btn" @click="resetSearch">
            <text>{{ $t("tazlax") }}</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-back-top :scroll-top="scrollTop" />
  </view>
</template>
          <script>
export default {
  data() {
    return {
     
      kolam: [0, 600],
      oy: [0, 50],
      showSearchPopup: false,
      dataList: {
        current_page: 1,
        data: [],
        last_page: 1,
        loadmoreStatus: "loadmore",
      },
      scrollTop: 0,


      orunList: [
        {
          Code: "658410",
          labelCn: "库尔勒市",
          label: "كورلا شەھىرى",
          value: 1,
        },
        {
          Code: "658410",
          labelCn: "轮台县",
          label: "بۈگۈر",
          value: 2,
        },
        {
          Code: "658410",
          labelCn: "尉犁",
          label: "لوپنۇر",
          value: 3,
        },
        {
          Code: "658410",
          labelCn: "若羌县",
          label: "چاقىلىق",
          value: 4,
        },
        {
          Code: "658410",
          labelCn: "且末县",
          label: "چەرچەن",
          value: 5,
        },
        {
          Code: "658410",
          labelCn: "焉耆",
          label: "قاراشەھەر",
          value: 6,
        },
        {
          Code: "658410",
          labelCn: "和静县",
          label: "خېجىڭ",
          value: 7,
        },
        {
          Code: "658410",
          labelCn: "和硕县",
          label: "خوشۇت",
          value: 8,
        },
        {
          Code: "658410",
          labelCn: "博湖",
          label: "باغراش",
          value: 9,
        },
        { value: 0, label: "بارلىق رايون", labelCn: "全部" },
      ],
      selectedOrun: 0,

    };
  },
  onLoad(e) {
    this.type = e.id;
    console.log("e", e, this.type);

    this._indexPage();
  },
  onShow() {},
  async onPullDownRefresh() {
    await this._index();
    this.dataList.current_page = 1;
    await this._indexPage();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {},
  async onReachBottom() {
    if (this.dataList.current_page < this.dataList.last_page) {
      this.dataList.current_page += 1;
      await this._indexPage();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    resetSearch() {
      this.selectedOrun = 0;

      // this.listAll = []; 清楚列表
      // this.getInfo(); 重新获取api
    },
    toggleButton() {
      this.showSearchPopup = true;
    },
    async _indexPage() {
      this.dataList.loadmoreStatus = "loading";
      let page = this.dataList.current_page;
      let params = {
        page: page,
        pageSize: 10,
        _id: 15,
      };
      await this.$uniapi("/get_info_list", params)
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;

            if (page == 1) {
              this.dataList.data = uqur.data;
              console.log("uqur", uqur.data);
            } else this.dataList.data.push(...uqur.data);
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
    async confirmSearch() {
      this.showSearchPopup = false;
      this.dataList.current_page = 1;
      this.dataList.loadmoreStatus = "loading";
      
      let params = {
        page: this.dataList.current_page,
        pageSize: 10,
        _id: 15,
        address: this.selectedOrun,      // رايون
      };

      await this.$uniapi("/get_info_list", params)
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;
            this.dataList.data = uqur.data;
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
  },
};
</script>
          <style lang="scss">
.grid-text {
  font-size: 14px;
  color: #000;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
.post-button {
  display: flex;
  height: 46.96rpx;
  padding: 4px 10px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-radius: 51.84rpx;
  border: 1px solid rgba(0, 0, 0, 0.134);
  color: #000000;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.3px;
  .u_pink {
    width: 42.08rpx;
    height: 42.08rpx;
    aspect-ratio: 1/1;
  }
}
.shake {
  display: inline-block;
  animation: shake 2s infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 0);
  }
  25% {
    transform: translate(-1px, 0);
  }
  50% {
    transform: translate(1px, 0);
  }
  75% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.search-popup {
  padding: 30rpx;
}
.action-btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}
.cancel-btn {
  background: #455ef7;
  color: #fff;

  .search-btn-content {
    display: flex;
    align-items: center;

    .search-icon {
      width: 36rpx;
      height: 36rpx;
      margin-left: 10rpx;
    }
  }
}
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.search-btn {
  background: #f5f5f5;
  color: #666;
}
.search-buttons {
  margin-top: 40rpx;

  .reset-btn {
    width: 100%;
    height: 68rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #666;
  }
}
.filter-section {
  margin-bottom: 40rpx;
}

.section-header {
  margin-bottom: 10rpx;

  .title-box {
    display: flex;
    align-items: center;

    .title-icon {
      width: 8rpx;
      height: 32rpx;
      background: #455ef7;
      border-radius: 4rpx;
    }

    .section-title {
      margin: 10rpx 20rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}
.city-row {
  margin-bottom: 10rpx;
  position: relative;
  // height: 74rpx;
  // overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-around;
  // align-items: center;
}

.city-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150rpx;
  padding: 8rpx 30rpx;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #455ef7;
  background: rgba(245, 245, 245, 0.5);
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 30rpx;
  border: 1rpx solid #455ef7;
}

/* 选中项样式 */
.city-item.active {
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  // transform: scale(1.05);
  background: #455ef7;
}

/* 未选中项的渐变效果 */
.city-item:not(.active) {
  opacity: 0.8;
  transform: scale(0.95);
}

/* 两侧渐变遮罩 */
.city-row::before,
.city-row::after {
  content: "";
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* چېكىلگەندىكى ئۈنۈم */
.city-item:active {
  transition: all 0.1s ease;
}
.slider_info {
  display: flex;
  justify-content: center;
  margin-bottom: 5rpx;
}
.slider_value {
  color: #455ef7;
  padding: 0 10rpx;
}
</style>
        